<script>
export default {
  name: 'TheTab',
  props: {
    label: {
      type: String,
      default: 'tab'
    },
    index: {
      type: [String, Number],
      default: '1'
    }
  },
  mounted () {
    this.$parent.pans.push(this)
  },
  computed: {
    isActive () {
      return this.$parent.currentIndex === this.index
    }
  },
  methods: {
    itemHandle () {
      this.$parent.changeIndex(this.index)
    }
  },
  render () {
    const className = {
      tab: true,
      active: this.isActive
    }
    return (
          <li onClick={this.itemHandle} class={className}>{this.label}</li>
    )
  }
}
</script>

<style scoped>
.tab{
    flex:1;
    line-height: 40px;
    text-align: center;
    margin:0 40px;
    font-size: 16px;
}
li.active{
    border-bottom:2px solid skyblue;
}
</style>
